<template>

  <div>

    <div id="top">
      <el-form :inline="true" size="mini">
        <el-form-item label="手机号：">
          <el-input v-model.trim="pagess.sPhone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon='el-icon-search' type="primary" @click="fyandmh">查询</el-button>
          <el-button icon='el-icon-refresh' class="filter-item" @click="cz">重置</el-button>
          <el-button  type="primary"  icon="el-icon-circle-plus-outline" size="mini" @click="handleAdd()">添加</el-button>
        </el-form-item>
      </el-form>
    </div>



    <!--//添加表单-->
    <el-dialog
      title="添加"
      :visible.sync="dialogVisible"
      width="30%">
      <span>
        <el-form label-width="80px" :model="formInsert" :rules="rules">
          <el-form-item label="手机" prop="sPhone">
              <el-input placeholder="请输入内容" v-model="formInsert.sPhone" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          <el-form-item label="名字"prop="sName">
            <el-input v-model="formInsert.sName"></el-input>
          </el-form-item>
         <el-form-item label="备注"prop="remark">
            <el-input v-model="formInsert.remark"></el-input>
          </el-form-item>

        </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm2('formInsert')">确 定</el-button>
            </span>
        </span>
    </el-dialog>




    <!--//修改表单-->
    <el-dialog
      width="35%"
      :title="title"
      :visible.sync="visible">
      <el-form ref="tableData" :model="formupd" label-width="100px">
        <el-form-item label="用户手机：">
          <el-input :disabled="true" v-model="formupd.sPhone"></el-input>
        </el-form-item>
        <el-form-item label="名称：">
          <el-input v-model="formupd.sName"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="formupd.remark"></el-input>
        </el-form-item>
      </el-form>
      <el-row style="margin-top:17px; ">
        <el-button style="float:right;margin-left:6px;" size="mini" type="danger" plain @click="visible=false">取 消</el-button>
        <el-button style="float:right" size="mini" type="primary" @click="submitFormupd('formupd')">确 定</el-button>
      </el-row>
    </el-dialog>
<!--//修改-->
    <el-dialog
      width="60%"
      :title="title"
      :visible.sync="xiugai"
      :before-close="handleClose">
      <div class="pad20">
        <div>
          <el-form :inline="true" size="mini">
            <el-form-item label="角色：">
              <el-input v-model.trim="pagess1.rname"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"  @click="handleCheckone">查询</el-button>
              <el-button class="filter-item" @click="cz">重置</el-button>
              <el-button type="success" @click="handleBatch()" size="mini">设置角色</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div>

          <el-table
            ref="multipleTable"
            :data="roletableDate"
            :row-class-name="tableRowClassName"
            style="width: 100%"
            @selection-change="handleSelectionChange">

            <el-table-column
              prop="rid"
              label="序号"
              width="120">
            </el-table-column>

            <el-table-column
              prop="rname"
              label="角色名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="rstatus"
              label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.rstatus"
                  @change="handleChangeStatus1(scope.row.rid, scope.row.rstatus)"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#ff4949"
                  inactive-color="#13ce66"
                  active-text="禁用"
                  inactive-text="正常">
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column
              prop="remark"
              label="备注">
            </el-table-column>
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>

          </el-table>

          <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="pagess1.currentPage"
            :page-sizes="[5, 10, 15, 20,25]"
            :page-size="pagess1.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagess1.total">
          </el-pagination>
        </div>
      </div>
    </el-dialog>








    <!--<template>-->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        >
        <el-table-column
          prop="sid"
          label="序号">
        </el-table-column>

        <el-table-column
          prop="sphone"
          label="手机号">
        </el-table-column>

        <el-table-column
          prop="sname"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="sstatus"
          label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.sstatus"
              @change="handleChangeStatus(scope.row.sid, scope.row.sstatus)"
              :active-value="1"
              :inactive-value="0"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="禁用"
              inactive-text="正常">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>

        <el-table-column
          prop="cz"
          label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" round plain  @click="handleEdit(scope.row)" :disabled="scope.row.sstatus==1">修改</el-button>
            <el-button size="mini" type="primary" round plain  @click="handlesz(scope.row.sid)" :disabled="scope.row.sstatus==1">设置角色</el-button>
          </template>

        </el-table-column>
      </el-table>
    <!--</template>-->


      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagess.currentPage"
        :page-sizes="[2, 4, 6, 8,10]"
        :page-size="pagess.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagess.total">
      </el-pagination>
    </div>



  </div>
</template>

<script>
  import qs from 'qs'
  export default {

    methods: {
      handleCurrentChange(val){
        this.pagess.currentPage=val;
        this.query();
      }
      ,handleSizeChange(val){
        this.pagess.pagesize=val;
        this.query();
      },
      handleCurrentChange1(val){
        this.pagess1.currentPage=val;
        this.queryrole();
      }
      ,handleSizeChange1(val){
        this.pagess1.pagesize=val;
        this.queryrole();
      },

      //分页
      fyandmh(){
        this.pagess.currentPage=1;
        this.query();
      },
      //重置按钮
      cz(){
        this.pagess.sPhone='';
        this.pagess1.rname=''
      },
      //查询
      query(){
        this.$axios.post("http://localhost:8899/education-system-roles/demo/t-staff/queryAll",qs.stringify(this.pagess)).then(r=>{
              this.tableData=r.data.obj.records;
              this.pagess.total=r.data.obj.total;
        })
      },


      //设置
        handlesz(obj){
        this.xiugai=true;
        this.rid=obj;
        this.tstarole.sid=obj;
         this.queryrole();
      },
      //设置里面的模糊查询
      handleCheckone(){
        this.pagess1.currentPage=1;
        this.queryrole();
      },

      //设置里面的  角色信息查询
       async queryrole(){
         await this.$axios.post("http://localhost:8899/education-system-roles/demo/t-role/queryRole",qs.stringify(this.pagess1)).then(r=>{

            this.roletableDate=r.data.obj.records;
            this.pagess1.total=r.data.obj.total;
        });
         //选中角色
         this.$axios.get("http://localhost:8899/education-system-roles/demo/t-staff-role/queryBySid?sid="+this.rid).then(r=>{
           this.roletableDate.forEach(rr=>{
             r.data.obj.forEach(res=>{
               if(rr.rid==res.rid){
                 this.$nextTick(()=>{
                   this.$refs.multipleTable.toggleRowSelection(rr,true);
                })
               }
             })
           })
         })
      },

      handleBatch(){
        let all=[];
        this.roles.forEach(r=>{
          all.push(r.rid)
        })
        this.tstarole.rid=all.join(",");
        this.$axios.get("http://localhost:8899/education-system-roles/demo/t-staff-role/updSidByRid?sid="+this.tstarole.sid+"&rid="+this.tstarole.rid).then(r=>{
              if(r.data.obj){
                this.$message.success("设置成功");
                this.xiugai=false;
                this.queryrole();
              }
        })
      },

      //设置里面的check
      handleSelectionChange(obj){
        //获取点击的值
        this.roles=obj;

      },



      //添加
      handleAdd(){
        this.dialogVisible=true;
      },
      //添加确认按钮
      submitForm2(formInsert){
        if(this.formInsert.sPhone!=''&this.formInsert.sName!=''){
          this.$axios.post("http://localhost:8899/education-system-roles/demo/t-staff/insertAll",qs.stringify(this.formInsert)).then(r=>{
            if(r.data.obj>0){
              this.dialogVisible=false;
              this.query();
            }
          })
        }else{
          this.$message.error("不能为空哦！！");
        }

      },
      //修改
      handleEdit(obj){
        this.visible=true;
        this.formupd.sid=obj.sid,
        this.formupd.sPhone=obj.sphone;
        this.formupd.sName=obj.sname;
        this.formupd.remark=obj.remark;
      },
      //确定修改信息
      submitFormupd(formupd){
        this.$axios.post("http://localhost:8899/education-system-roles/demo/t-staff/upd",qs.stringify(this.formupd)).then(r=>{
            if(r.data.obj){
              this.visible=false;
              this.query();
            }
        })
      },

      tableRowClassName({row, rowIndex}) {
        if (rowIndex%2 === 1) {
          return 'warning-row';
        } else if (rowIndex%2 === 0) {
          return 'success-row';
        }
        return '';
      },

      //修改员工按钮状态
      handleChangeStatus(sid, sstatus) {
        const title = { 1: '禁用', 0: '启用' }
        this.$confirm(`确定要${title[sstatus]}吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("http://localhost:8899/education-system-roles/demo/t-staff/updanniu?sid="+sid+"&sstatus="+sstatus).then(r=>{
              this.query();
          })
        }).catch(() => {
          this.query();
        })
      },
      //修改角色按钮状态
      handleChangeStatus1(rid, rstatus) {
        const title = { 1: '禁用', 0: '启用' }
        this.$confirm(`确定要${title[rstatus]}吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.get("http://localhost:8899/education-system-roles/demo/t-role/updRoleById?rid="+rid+"&rstatus="+rstatus).then(r=>{
            this.queryrole();
          })
        }).catch(() => {
          this.queryrole();
        })
      },


    },
    created(){
      this.query();
    },
    data() {
      return {
        tstarole:{
          sid:'',
          rid:''
        },
        roles:[],
        rid:'',
        pagess:{
          currentPage:1,
          pagesize:2,
          total:0,
          sPhone:''
        },
        pagess1:{
          currentPage:1,
          pagesize:5,
          total:0,
          rname:''
        },
        dialogVisible:false,
        visible:false,
        xiugai:false,
        map:{},
        idList: [],
        multipleTable:[],
        formInsert:{
          sPhone:'',
          sName:'',
          remark:''
        },

        formupd:{
          sid:'',
          sPhone:'',
          sName:'',
          remark:''
        },
        tableData: [
        ],
        roletableDate:[],
        rules: {
          sName: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '请输入备注', trigger: 'blur' }
          ],
          sPhone:[
            { required: true, message: '请输入手机号', trigger: 'blur' }
          ]
        },
      }
    }
  }
</script>


<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  #top{
    margin-top: 15px;
  }
  .el-form-item__label {
   padding: 0;
  }
  .el-pagination{
    text-align: center;
  }
  .input-with-select{
    width: 325px;
  }
</style>
